<!DOCTYPE html>
<html>
<head>
    <title>财务报表</title>
		<#include "/header.html">
</head>
<body>
<div>
    <div id="financial-statistics" style="width: 800px;height:550px;"></div>
</div>

<script src="${request.contextPath}/statics/js/echarts/echarts4.min.js"></script>
<script src="${request.contextPath}/statics/js/echarts/macarons.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var chart = echarts.init(document.getElementById('financial-statistics'), 'macarons');

    // 指定图表的配置项和数据
    option = {
        title : {
            text: '财务统计'
        },
        tooltip : {
            trigger: 'axis'
        },
        legend: {
            data:['数量','金额']
        },
        toolbox: {
            show : true,
            feature : {
                mark : {show: true},
                dataView : {show: true, readOnly: false},
                magicType : {show: true, type: ['line', 'bar']},
                restore : {show: true},
                saveAsImage : {show: true}
            }
        },
        calculable : true,
        xAxis : [
            {
                type : 'category',
                data : []
            }
        ],
        yAxis : [
            {
                type : 'value',
                name : '金额',
                axisLabel : {
                    formatter: '{value} 元'
                }
            },
            {
                type : 'value',
                name : '个数',
                axisLabel : {
                    formatter: '{value} 笔'
                }
            }
        ],
        series : [
            {
                name:'金额',
                type:'bar',
                data:[],
                markPoint : {
                    data : [
                        {type : 'max', name: '最大值'},
                        {type : 'min', name: '最小值'}
                    ]
                },
                markLine : {
                    data : [
                        {type : 'average', name: '平均值'}
                    ]
                }
            },
            {
                name:'数量',
                type:'line',
                data:[],
                yAxisIndex: 1

            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    chart.setOption(option);

    $(function() {
        // 异步加载数据
        jQuery.ajax({
            type: 'Get',
            url: baseURL + 'sys/petcharges/statistics',
            success: function (data) {
                var result = data.list;
                var linNums=[];
                var titles=[];
                var linAmount=[];
                for (var i=0;i< result.length;i++)
                {
                    titles.push(result[i].title);
                    linNums.push(result[i].num);
                    linAmount.push(result[i].amount);
                }
                chart.showLoading("数据加载中...");
                // 填入数据
                chart.setOption({
                    xAxis: {
                        data: titles
                    },
                    series: [
                        {
                            name: '金额',
                            data: linAmount
                        },
                        {
                            name: '数量',
                            data: linNums
                        }
                    ]
                });
            }
        });
    });
</script>
</body>
</html>